<template>
  <div style="background:#ccc;height:100vh">
    <div style="height:163px;background:rgba(36, 73, 148)">
      <i class="iconfont icon-left gobackIcon" @click="goUpperStory()" style="z-index:2"></i>
      <p style="text-align: center;font-size:18px;color:#fff;margin:0;padding:6px 0">人生历程</p>
      <div style="padding:0 10px">
        <img style="width:100%;height:100%" src="../../assets/image/sourse/个人视频.png" alt />
      </div>
    </div>
    <div style="background:#ccc;padding-top: 30px;">
      <div style="display:flex;padding:10px 10px;">
        <img
          style="width:49%;height:100%;display:inline-block;padding:2px"
          src="../../assets/image/sourse/中华族裔谱.png"
          alt
        />
        <img
          style="width:49%;height:100%;display:inline-block;margin:2px"
          src="../../assets/image/sourse/追溯炎黄子孙.png"
          alt
        />
      </div>
      <div style="padding:0 10px;">
        <van-tabs
          style="border-radius:10px;border:1px solid #ccc;overflow:hidden"
          :line-width="0"
          :swipe-threshold="5"
          title-active-color="#212121"
          v-model="active"
        >
          <van-tab>
            <div slot="title">
              <span>百家姓</span>
            </div>
            <div>
              <div v-if="arr">
                <ul class="item">
                  <li v-for="item in arr.Array" :key="item">{{item}}</li>
                </ul>
                <!-- <div style="border:1px solid #000;height:30px;">热门推荐</div>
      <ul>
          <li v-for="item in arr.Hot.arr" :key="item">{{item}}</li>
                </ul>-->
              </div>
            </div>
          </van-tab>
          <van-tab>
            <div slot="title">
              <span>查询家谱</span>
            </div>
          </van-tab>
          <van-tab>
            <div slot="title">
              <span>新增谱系</span>
            </div>
          </van-tab>
          <van-tab>
            <div slot="title">
              <span>新增家谱</span>
            </div>
            <div style="background:rgb(235, 235, 235)">
              <div style="height: 50px;display:flex;justify-content: center;align-items: center;">
                <input
                  type="text"
                  @keyup.enter="search()"
                  v-model="treeName"
                  placeholder="输入姓氏或谱系名称、输入姓名或谱号(身份证号)"
                  style="border:1px solid #ccc;border-radius:5px;width:80%;padding-left:4px"
                />
              </div>
              <div>
                <div>
                  <div class="imageBox" style="justify-content:center;align-items: center;">
                    <span>
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                    <span style="font-size:12px;margin:0 20px;display:flex;justify-content: center">
                      <img
                        @click="show=true"
                        style="width:20px;height:20px"
                        src="../../assets/image/sourse/添加第几任图标.png"
                        alt
                      />-第几任-
                    </span>
                    <span style="display:inline-block;">
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                  </div>
                  <p style="margin:0;margin-left:20px">
                    <img
                      style="width:50%;height:18px"
                      src="../../assets/image/sourse/连接下一代的线1.png"
                      alt
                    />
                    <img
                      @click="show=true"
                      style="height:18px;position:absolute;right:40px"
                      src="../../assets/image/sourse/添加下一代.png"
                      alt
                    />
                  </p>
                  <div class="imageBox" style="display: flex;">
                    <span>
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                    <span style="margin-left:15px">
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                  </div>
                  <p style="margin:0;margin-left:20px">
                    <img
                      style="width:50%;height:18px"
                      src="../../assets/image/sourse/连接下一代的线.png"
                      alt
                    />
                    <img
                      style="height:18px;position:absolute;left:75px"
                      @click="show=true"
                      src="../../assets/image/sourse/添加下一代.png"
                      alt
                    />
                    <img
                      style="height:18px;position:absolute;right:18px"
                      @click="show=true"
                      src="../../assets/image/sourse/添加下一代.png"
                      alt
                    />
                  </p>
                  <div class="imageBox" style="display: flex;">
                    <span>
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                    <span>
                      <img src="../../assets/image/sourse/女人头像.png" alt />
                    </span>
                    <span style="margin-left:70px">
                      <img src="../../assets/image/sourse/男人头像.png" alt />
                    </span>
                  </div>
                </div>
                <!-- <img style="display:block;width:80%;margin:0 auto;height:30%"
                src="../../assets/image/relation_diagram.png" alt="">-->
                <p
                  style="font-size:10px;text-align: center;padding:5px 0;border-top:1px solid #ccc;color:red;"
                >注:谱号为身份证号码,古代没有按生辰年月日身份证格式编号!</p>
              </div>
            </div>
          </van-tab>
          <van-tab>
            <div slot="title">
              <span>谱系文化</span>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-popup
      v-model="show"
      :overlay="false"
      position="bottom"
      style="height: 50%;background:rgb(235, 235, 235)"
    >
      <div style="background:rgb(199, 199, 199)">
        <span style="display:flex;align-items: center;padding:8px">
          <i class="iconfont icon-caidan1" style="font-size:20px;"></i>新增家谱
        </span>
        <span
          class="iconfont icon-guanbi1"
          style="position:absolute;right:10px;top:10px"
          @click="show=false"
        ></span>
      </div>
      <div style="padding:10px;width:90%">
        <ul>
          <li style="display:flex;justify-content:center" class="long">
            <span>家谱姓氏</span>
            <input type="text" v-model="family_name" />
          </li>
          <li style="display:flex;justify-content:center" class="long">
            <span>辈分谱名</span>
            <input type="text" v-model="seniority" />
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span style="display:inline-block;;">姓名</span>
              <input type="text" v-model="name" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>性别</span>
              <select name id v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span>生辰八字</span>
              <input type="text" v-model="bazi" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>出生地</span>
              <input type="text" />
            </div>
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span>曾用名</span>
              <input type="text" v-model="former_name" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>身高</span>
              <input type="text" v-model="height" />
            </div>
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span>体重</span>
              <input type="text" v-model="weight" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>文化</span>
              <input type="text" v-model="culture" />
            </div>
          </li>
          <li style="display:flex;justify-content:center" class="long">
            <span>在世描述</span>
            <input type="text" v-model="desc1" />
          </li>
          <li style="display:flex;justify-content:center" class="long">
            <span>生前简历</span>
            <input type="text" v-model="desc2" />
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span>离世原因</span>
              <input type="text" v-model="death_desc" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>离世日期</span>
              <input type="text" v-model="death_date" />
            </div>
          </li>
          <li style="display:flex;justify-content:center">
            <div style="display:flex;" class="short">
              <span>安葬地</span>
              <input type="text" v-model="inter" />
            </div>
            <div style="display:flex;" class="short rightShor">
              <span>坟向</span>
              <input type="text" v-model="grave" />
            </div>
          </li>
          <li style="display:flex;font-size:12px;">
            <span style="display:inline-block;width:25%;text-align: left;">生前照片</span>
            <input type="file" style="width:70%" />
          </li>
        </ul>
      </div>
      <div style="text-align: center;padding:10px">
        <van-button type="danger" size="mini" @click="saveInfo()">保存</van-button>
        <van-button color="#ccc" size="mini">取消</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import genealogyArr from "../../assets/json/genealogy.json";
export default {
  data: () => ({
    show: false,
    active: 3,
    arr: null,
    treeName: "",
    name: "",
    former_name: "",
    sex: "",
    icon: "",
    family_name: "",
    bazi: "",
    seniority: "",
    height: "",
    weight: "",
    culture: "",
    desc1: "",
    desc2: "",
    death_desc: "",
    death_date: "",
    inter: "",
    grave: ""
  }),
  created() {
    this.arr = genealogyArr;
  },
  mounted() {},
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    },
    saveInfo() {
      let data = {
        id: 0,
        type: 1,
        name: this.name,
        former_name: this.former_name,
        sex: this.sex,
        icon: this.icon,
        family_name: this.family_name,
        bazi: this.bazi,
        seniority: this.seniority,
        height: this.height,
        weight: this.weight,
        culture: this.culture,
        desc1: this.desc1,
        desc2: this.desc2,
        death_desc: this.death_desc,
        death_date: this.death_date,
        inter: this.inter,
        grave: this.grave
      };
      this.$axios.post(`ym/family/add-node`, data).then(res => {
        this.$Toast(res.data.msg);
        this.show = false;
      });
    },
    search() {
      let searchText = {
        treeName: this.treeName
      };
      this.$axios.post(`ym/family/show-node`,searchText).then(res=>{
        console.log(res)
      })
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/css/mine.scss";
.gobackIcon {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #fff;
}
.item {
  font-size: 14px;
  > li {
    text-align: center;
    padding: 5px 0;
    width: 50%;
    display: inline-block;
  }
}
li {
  padding: 1px 0;
}

.long {
  font-size: 12px;

  span {
    width: 26%;
  }

  input {
    width: 80%;
    border-radius: 4px;
    outline: none;
    border: 1px solid #333;
  }
}

.short {
  font-size: 12px;
  display: inline-block;
  width: 80%;
  margin: 0 auto;

  span {
    width: 50%;
  }

  input {
    width: 50%;
    border-radius: 4px;
    outline: none;
    border: 1px solid #333;
  }

  select {
    width: 50%;
  }
}

.imageBox {
  display: flex;
  margin: 2px 10px;

  span {
    img {
      width: 60px;
      height: 60px;
    }
  }
}

.rightShor {
  text-align: center !important;
}

.UltraShort {
  font-size: 12px;

  span {
    width: 30%;
  }

  input {
    width: 70%;
    border-radius: 4px;
    outline: none;
    border: 1px solid #333;
  }

  select {
    width: 100px;
  }
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
  font-size: 12px;
  text-align: center;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
  font-size: 12px;
  text-align: center;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
  font-size: 12px;
  text-align: center;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
  font-size: 12px;
  text-align: center;
}
</style>